import imageShow from '@/components/imageShow/imageShow.vue'
import tilesMap from '@/components/tilesMap/tilesMap.vue'

/*
  @events
  on-selected 如果开启选择功能,每次选中时触发
  on-click 每次点击单个单元时触发
*/

export default {
  name: 'envShow',
  components: {
    tilesMap,
    imageShow
  },
  props: {
    envData: {
      type: Object,
      default: null
    },
    // 最小尺寸
    minImageSize: {
      type: [Number, String],
      default: 32
    },
    // 是否开启hover模式
    hoverBorderEnabled: {
      type: Boolean,
      default: false
    },
    // 选择模式: drag 拖拽选择, click 点击选择, 其他值 不开启选择功能
    selectedMode: {
      type: String,
      default: ''
    },
    
  },
  data () {
    return {
      autotileSelected: null,
      tilesSelected: null,
      
      // 拖拽标记
      isDragSignal: false,
      // 拖拽选中的范围
      selectedRange: null,
      // 拖拽缓存
      dragRememberIndex: -1,
      
      // Autotile点击
      selectedAutotile: null,
    }
  },
  computed: {
    // 传给组件的autotiles数据列表
    autotiles () {
      if (!this.envData) {
        return []
      }
      
      return this.envData.autotiles.map((autotile) => {
        return {
          // 这个objectsIndex必须传入,否则出错
          objectsIndex: autotile,
          // 其他数据
          ...this.envData.objects[autotile]
        }
      })
    },
    
    // 传给组件的tiles数据列表
    tiles () {
      if (!this.envData) {
        return []
      }
      
      return this.envData.tiles.map((tile) => {
        return {
          // 这个objectsIndex必须传入,否则出错
          objectsIndex: tile,
          // 其他数据
          ...this.envData.objects[tile]
        }
      })
    },
    
    // 容器宽度
    wrapperWidth () {
      if (!this.envData || !this.envData.colNum || !this.envData.tilesWidth) {
        return 0
      }
      
      const colNum = this.envData.colNum
      const minImageSize = parseInt(this.minImageSize)
      let width = this.envData.tilesWidth
      if (width < minImageSize) {
        width = minImageSize
      }
      // console.log(width)
      return width * colNum
    },
    
    // 单元宽度
    itemWidth () {
      if (!this.envData || !this.envData.colNum || !this.envData.tilesWidth) {
        return 0
      }
      
      let width = this.envData.tilesWidth
      const minImageSize = parseInt(this.minImageSize)
      if (width < minImageSize) {
        width = minImageSize
      }
      return width
    },
    
    // 根据Autotile和图块的不同,区分获取selectedMode
    getSelectedMode () {
      return (type) => {
        if (this.selectedMode !== 'drag') {
          // 不选取模式或者点击选取模式,两者没有区别,原样返回
          return this.selectedMode
        }
        
        if (type === 'Autotile') {
          // Autotile没有拖拽模式,依然返回click
          return 'click'
        }
        
        return 'drag'
      }
    }
  },
  methods: {
    // 选中内容时触发
    selectedHandler (data) {
      if (data.isAutotile) {
        // 选择Autotile,清楚Tile区域的选择
        this.$refs.tilesMap.clearSelected()
      }
      else {
        // 选择Tile,清楚Autotile区域的选择
        this.$refs.autotilesMap.clearSelected()
      }
      // 类别标记
      data.type = 'Env'
      
      // 触发事件
      // console.log(data)
      this.$emit('on-selected', data)
    },
    
    // 点击单元时触发
    clickHandler (data) {
      this.$emit('on-click', data)
    },
  }
}